iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
自我挑戰組

ASP.NET Core & Blazor系列 第 8

Day 08 CSS樣式改動及資料綁定詳述

  • 分享至 

  • xImage
  •  

現在每次啟動專案,預設路徑都會是/,但我們目前沒有Component套用這個路由,要自己切換到Post實在有些麻煩,另外Menu的圖案也跟名稱不符,我們來調整一下。

我們先來改icon,由於font-awesome目前已用會員制,必須登入才能產生一套免費的icon集合,因此筆者使用bootstrap的icon。首先去bootstrap的icon頁面下載zip檔(不想下載檔案的人可以直接引用CDN),將檔案解壓縮放在wwwroot,於_Host.cshtml引用bootstrap-icons.css,在官網搜尋自己喜歡的icon套用即可,筆者這邊還有做些樣式調整。
https://ithelp.ithome.com.tw/upload/images/20210908/201408938Oeel5Fbwe.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893oYJhiDRIw8.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893kUQ71aGxGd.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893VJAomr8sz4.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893NzjZYf625r.png

接著在Blazor Server點擊右鍵選擇屬性,切換偵錯頁簽並在紅框處輸入Post,如果是偏好在文件輸入的人,也可以打開Properties下的launchSettings.json檔案,於profiles內的IIS Express輸入這行"launchUrl": "Post",,兩者是一樣的結果。
https://ithelp.ithome.com.tw/upload/images/20210908/2014089371yfl1K1xi.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893YdyMlNUAHu.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/201408933uoSzVwiHf.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893BeHPnceMC8.png

Day06有說到綁定,不過只有稍微帶過,因為當時的目的只是展示form,現在來細說一下。

Blazor的資料綁定有分為單向綁定(one way binding)跟雙向綁定(two way binding),單向綁定就是在畫面上輸入@variable,有什麼資料就顯示什麼。
https://ithelp.ithome.com.tw/upload/images/20210908/20140893xjN24JZTxA.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893Fcv4Y4X7qc.png

雙向綁定則要用@bind-value將input內的資料跟畫面綁在一起,畫面輸入的內容也會反向影響資料。
https://ithelp.ithome.com.tw/upload/images/20210908/20140893DzYmgCwSVT.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893j9KICxs8l2.png

如果有學過Angular的人應該會很熟悉,就是[ngModel]跟[(ngModel)]的用途,只是名字換了一個。

那Blazor有像Angular的(click)事件綁定嗎?也是有的,不過若用<InputText> Component會說到較為複雜如EventCallBack的內容,所以筆者這邊先用單純的<input>元素,之後講到EventCallBack再回來說明。

先把<InputText>換成<input>,接著將@bind-Value改成@bind,再加入@bind:event,值為html的事件名,如onchangeoninput等等,這些事件在MDN都可以查到。接著在網頁的輸入框輸入內容,就可以看到底下的字即時變換了,可以看到我的焦點雖然仍在input元素上,底下的內容已經改變了。
https://ithelp.ithome.com.tw/upload/images/20210914/20140893Pr6of4a8lr.png
https://ithelp.ithome.com.tw/upload/images/20210908/20140893u91iUCq9TT.png

不過oninputonchange的使用時機最好再拿捏一下,例如如果使用oninput綁定number型別的資料,當使用者輸入1.5的瞬間,就會被改為1,這會讓使用者困惑,若用onchange,則是在使用者移開焦點後才會將1.5改為1。若非得用oninput的話,可以將綁定資料改為nullable或是字串,再使用getter, setter自己實作邏輯處理不合法字元。

那Blazor有類似Angular的pipe去改變網頁的資料格式如number、datetime嗎?目前有提供@bind:format綁定可以改變日期格式,我們先在PostModel加入一個CreateDateTime,接著複製一組標題的div貼上,將label@bind的綁定資料改一下,再把@bind:event改成@bind:format,就可以看到顯示成指定的日期格式。
https://ithelp.ithome.com.tw/upload/images/20210908/20140893L5sKMMwPVD.pnghttps://ithelp.ithome.com.tw/upload/images/20210908/20140893N92Ae35gNT.png

要注意的是Blazor並沒有對應<select>的Component,因為HTML的attribute不能有null,最接近null的概念是移除value這個attribute,但如果選到一個沒有value<option>,瀏覽器會將該<option>的文字當成value

Ref: ASP.NET Core Blazor data binding

Ref: GlobalEventHandlers.onchange

Ref: Unparsable values


上一篇
Day 07 生命週期(Lifetime)
下一篇
Day 09 Parameters
系列文
ASP.NET Core & Blazor30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言